<template>
	<div class="windCenterWrap">
		<!-- 电站类型列表 -->
		<div class="type-content">
			<div class="type-list">
				<div
					class="item pointer"
					v-for="item in typeList"
					:key="item.value"
					:class="{ active: currentType == item.value }"
					@click="handleTypeClick(item)"
				>
					<div class="item-icon">
						<i :class="`item-icon-${item.value}`"></i>
					</div>
					<p>{{ `${item.label}（${item.number}）` }}</p>
				</div>
			</div>
		</div>
		<!-- 电站数据统计 -->
		<div class="data-content">
			<div class="data-list">
				<div class="item">
					<i></i>
					<div class="item-info">
						<span><b>20</b>MW</span>
						<p>总装机容量</p>
					</div>
				</div>
				<div class="item">
					<i></i>
					<div class="item-info">
						<span><b>95.2</b>%</span>
						<p>负荷率</p>
					</div>
				</div>
				<div class="item">
					<i></i>
					<div class="item-info">
						<span><b>44,533,320.44</b>MW</span>
						<p>实时功率</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 状态列表 -->
		<div class="status-content">
			<div class="item">
				<p class="label"><i></i>正常</p>
				<p class="value"><span>2</span>座</p>
			</div>
			<div class="item">
				<p class="label"><i></i>低效</p>
				<p class="value"><span>1</span>座</p>
			</div>
			<div class="item">
				<p class="label"><i></i>数据异常</p>
				<p class="value"><span>1</span>座</p>
			</div>
		</div>
		<!-- 减少量列表 -->
		<div class="reduce-content">
			<div class="item">
				<i class="item-icon item-icon-1"></i>
				<div class="item-info">
					<span><b>78.24</b>万吨</span>
					<p>节约标准煤</p>
				</div>
			</div>
			<div class="item">
				<i class="item-icon item-icon-2"></i>
				<div class="item-info">
					<span><b>78.24</b>万吨</span>
					<p>减少排放二氧化碳</p>
				</div>
			</div>
			<div class="item">
				<i class="item-icon item-icon-3"></i>
				<div class="item-info">
					<span><b>78.24</b>万吨</span>
					<p>减少排放氮氧化物</p>
				</div>
			</div>
		</div>
		<!-- 地图 -->
		<div class="mapList">
			<div id="svgTemplateByWindPv" ref="windPvSvgRef"></div>
		</div>
	</div>
	<!-- pop弹窗 -->
	<WindAnfPvPop ref="popperRef" :showPopover="showPopover" :info="detailInfo" @leave="hideTooltip" @enter="showTooltip" />
</template>
<script setup>
import { useSvg } from "./useSvg";
import WindAnfPvPop from "./windAndPvPop";
import windAndPv from "@/assets/images/home/gf.svg";
const { getSvg } = useSvg(true);
const svgH = ref("80%");
const detailInfo = ref({});
const windPvSvgRef = ref(null);
const showPopover = ref(false);
// 电站类型
const currentType = ref(0);
const typeList = ref([
	{
		label: "全部",
		value: 0,
		number: 6
	},
	{
		label: "光伏",
		value: 1,
		number: 5
	},
	{
		label: "风电",
		value: 2,
		number: 1
	}
]);
// 提示框
let hideTimeout = ref(null);
const showDelay = 200;
const hideDelay = 150;
const popperRef = ref(null);

// 显示提示框
const showTooltip = () => {
	clearTimeout(hideTimeout);
	setTimeout(() => {
		showPopover.value = true;
	}, showDelay);
};
// 隐藏提示框
const hideTooltip = () => {
	hideTimeout = setTimeout(() => {
		showPopover.value = false;
	}, hideDelay);
};
const resize = () => {
	getSvg(windAndPv, windPvSvgRef.value, "svgTemplateByWindPv", handleClick, svgH.value);
};
onMounted(() => {
	resize();
	setTimeout(() => {
		setAttributeToEl();
	}, 2000);
});
const handleClick = node => {
	console.log(node);
};
const setAttributeToEl = () => {
	const addNodeAll = document.querySelectorAll("[device-id]");
	addNodeAll.forEach(node => {
		node.style.display = "block";
		const currentId = node.getAttribute("device-id");
		if (currentType.value == 1) {
			if (currentId == "CZ6") {
				node.style.display = "none";
				return;
			}
		}
		if (currentType.value == 2) {
			if (["CZ1", "CZ2", "CZ3", "CZ4", "CZ5"].includes(currentId)) {
				node.style.display = "none";
				return;
			}
		}
		node.addEventListener("mouseenter", handleMouseEnter);
		node.addEventListener("mouseleave", hideTooltip);
	});
};
const handleMouseEnter = event => {
	console.log(event.target.attributes["device-id"].value);
	showTooltip();
	popperRef.value?.updateMouse(event);
	// 处理弹窗显示逻辑
	// detailInfo.value = {}
};
const handleTypeClick = item => {
	currentType.value = item.value;
	setAttributeToEl();
};
</script>
<style scoped lang="scss">
.windCenterWrap {
	width: 900px;
	height: 100%;
	position: relative;
	.data-content {
		position: absolute;
		width: 100%;
		top: 30px;
		left: 0;
		.data-list {
			display: flex;
			justify-content: center;
			align-items: center;
			.item {
				display: flex;
				align-items: center;
				margin: 0 25px;
				i {
					width: 84px;
					height: 56px;
					background: url("@/assets/images/home/data_item_1.png") no-repeat;
					background-size: contain;
					margin-right: 8px;
				}
				&:nth-child(1) {
					i {
						background: url("@/assets/images/home/data_item_2.png") no-repeat;
						background-size: contain;
					}
				}
				&:nth-child(2) {
					i {
						background: url("@/assets/images/home/data_item_3.png") no-repeat;
						background-size: contain;
					}
				}
				.item-info {
					span {
						font-family: "Source Han Sans CN";
						font-weight: 500;
						font-size: 12px;
						color: #8da3c1;
						b {
							font-family: "DIN Alternate-Bold";
							font-weight: bold;
							font-size: 20px;
							color: #ffffff;
							margin-right: 4px;
							line-height: 20px;
						}
					}
					p {
						font-family: "Source Han Sans CN";
						padding-top: 4px;
						font-weight: 500;
						font-size: 12px;
						color: #8da3c1;
					}
				}
			}
		}
	}
	.type-content {
		position: absolute;
		width: 160px;
		top: 50%;
		left: 40px;
		transform: translateY(-50%);
		.type-list {
			&::before {
				content: "";
				width: 2px;
				height: 156px;
				background: linear-gradient(225deg, rgba(3, 230, 254, 0) 0%, #03e6fe 50%, rgba(3, 230, 254, 0) 100%);
				position: absolute;
				left: 19px;
				top: -10px;
				z-index: 3;
			}
			.item {
				position: relative;
				z-index: 4;
				height: 40px;
				margin: 4px 0px;
				display: flex;
				align-items: center;
				&.active {
					.item-icon {
						background: url("@/assets/images/home/type_icon_active_bg.png") no-repeat;
						background-size: contain;
					}
					p {
						font-family: "Source Han Sans CN";
						font-size: 16px;
						color: #d1f4ff;
						background: url("@/assets/images/home/type_item_active_bg.png") no-repeat;
						background-size: contain;
					}
				}
				.item-icon {
					width: 40px;
					height: 40px;
					background: url("@/assets/images/home/type_icon_bg.png") no-repeat;
					background-size: contain;
					display: flex;
					justify-content: center;
					align-items: center;
					&-0 {
						width: 24px;
						height: 24px;
						background: url("@/assets/images/home/type_icon_all.png") no-repeat;
						background-size: contain;
					}
					&-1 {
						width: 24px;
						height: 24px;
						background: url("@/assets/images/home/type_icon_gf.png") no-repeat;
						background-size: contain;
					}
					&-2 {
						width: 24px;
						height: 24px;
						background: url("@/assets/images/home/type_icon_fj.png") no-repeat;
						background-size: contain;
					}
				}
				p {
					width: 120px;
					height: 32px;
					font-family: "Source Han Sans CN";
					font-size: 16px;
					color: #8da3c1;
					background: linear-gradient(91deg, rgba(80, 187, 255, 0) 0%, rgba(80, 187, 255, 0.1) 50%, rgba(80, 187, 255, 0) 100%);
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
	.status-content {
		position: absolute;
		bottom: 20px;
		left: 34px;
		width: 132px;
		height: 121px;
		padding-top: 18px;
		background: url("@/assets/images/home/status_bg.png") no-repeat;
		background-size: contain;
		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 8px 8px 0;
			&:nth-child(2) {
				.label {
					i {
						background-color: #ff6271;
					}
				}
			}
			&:nth-child(3) {
				.label {
					i {
						background-color: #8da3c1;
					}
				}
			}
			.label {
				font-family: "Source Han Sans CN";
				font-size: 14px;
				color: #ffffff;
				display: flex;
				align-items: center;
				i {
					width: 10px;
					height: 10px;
					background: #50bbff;
					margin-right: 4px;
				}
			}
			.value {
				font-family: "Source Han Sans CN";
				font-weight: 500;
				font-size: 12px;
				color: #8da3c1;
				display: flex;
				align-items: center;
				span {
					font-family: "DIN Alternate-Bold";
					font-weight: bold;
					font-size: 16px;
					color: #ffffff;
					margin-right: 6px;
				}
			}
		}
	}
	.reduce-content {
		position: absolute;
		bottom: 42px;
		right: 40px;
		.item {
			padding-top: 20px;
			display: flex;
			align-items: center;
			.item-icon {
				width: 58px;
				height: 66px;
				margin-right: 8px;
				&.item-icon-1 {
					background: url("@/assets/images/home/reduce_icon_1.png") no-repeat;
					background-size: contain;
				}
				&.item-icon-2 {
					background: url("@/assets/images/home/reduce_icon_2.png") no-repeat;
					background-size: contain;
				}
				&.item-icon-3 {
					background: url("@/assets/images/home/reduce_icon_3.png") no-repeat;
					background-size: contain;
				}
			}
			.item-info {
				span {
					font-family: "Source Han Sans CN";
					font-weight: 500;
					font-size: 12px;
					color: #8da3c1;
					b {
						font-family: "DIN Alternate-Bold";
						font-weight: bold;
						font-size: 20px;
						color: #ffffff;
						line-height: 14px;
						margin-right: 4px;
					}
				}
				p {
					font-family: "Source Han Sans CN";
					font-weight: 500;
					font-size: 12px;
					color: #8da3c1;
				}
			}
		}
	}
}
</style>
